<template>
  <!-- <el-row> -->

  <div v-if="showAllCom" class="row content-box">
    <!-- align="center" -->
    <table class="all-table" border="1" width="400px">
      <caption>
        <!--            <h2>购物车</h2>-->
        <h2>全部商品</h2>
      </caption>

      <!--    <my-checkbox v-model="isSelect">复选框</my-checkbox>-->
      <tr align="center">
        <td>选中</td>
        <td>货名</td>
        <td>单价</td>
        <td>数量</td>
        <td>合计</td>
      </tr>
      <tr align="center" v-for="(user, index) in package1" :key="index">
        <td>
          <!-- 游泳 -->
          <!-- checkbox vue 被check  -->
          <!-- checked="false" -->
          <!-- <input

                  type="checkbox"
                  v-model="hobby2"
                  value="游泳"
                  @click="handleClick($event, index)"
                /> -->

          <!--              <el-che-->
          <!-- label="Option 1" -->
          <el-checkbox v-model="user.checked" size="large" />

          <!-- https://www.cnblogs.com/coderwhytop/p/14436272.html -->
          <!-- <input type="checkbox" v-model="hobby2" value="健身">健身
                <input type="checkbox" v-model="hobby2" value="旅游">旅游 -->
        </td>
        <td>{{ user.name }}</td>
        <td>{{ user.price }}</td>
        <td>
          <button @click="sub(index)">-</button>
          {{ user.count }}
          <button @click="add(index)">+</button>
        </td>
        <td>{{ user.price * user.count }}</td>
      </tr>
      <tr align="center">
        <td>总价</td>
        <td colspan="3">{{ computedname }}</td>
      </tr>

      <!-- <div class="col"></div> -->
    </table>

    <div class="col btns inside-ver-center">
      <el-button @click="allSel">全选</el-button>
      <el-button @click="allNotSel">全不选</el-button>
      <el-button @click="addCommodity">添加商品</el-button>
       <!-- <el-button @click="addCommodity">全部取消选中</el-button> -->
    </div>

    <!-- <button @click="addCommodity">添加商品</button> -->
  </div>
  <!-- </el-row> -->

  <!-- 定义的组件没有显示 vue  -->
  <!--  Unresolved variable or type packageMine-->
  <div  class="row content-box" >
  <MyCommodity v-model="packageMine"></MyCommodity>
  <el-button @click="showAllComDo">显示所有商品</el-button>
  <!-- <button @click="showAllComDo">显示所有商品</button> -->
  </div>

  <!--  <table border="1" align="center" width="400px">-->
  <!--    <caption>-->
  <!--      <h2>我的商品</h2>-->
  <!--    </caption>-->
  <!--    <tr align="center">-->
  <!--      <td>货名</td>-->
  <!--      <td>单价</td>-->
  <!--      <td>数量</td>-->
  <!--      <td>合计</td>-->
  <!--    </tr>-->
  <!--    <tr align="center" v-for="(user, index) in packageMine" :key="index">-->
  <!--      <td>-->
  <!--        &lt;!&ndash; 游泳 &ndash;&gt;-->
  <!--        &lt;!&ndash; 自己实现 checkbox &ndash;&gt;-->
  <!--        &lt;!&ndash; <input-->
  <!--          checked="user.checked"-->
  <!--          type="checkbox"-->
  <!--          v-model="hobby2"-->
  <!--          value="游泳"-->
  <!--        /> &ndash;&gt;-->

  <!--        &lt;!&ndash; label="Option 1" &ndash;&gt;-->
  <!--        <el-checkbox v-model="user.checked" size="large" />-->
  <!--        &lt;!&ndash; <el-checkbox v-model="checked2" label="Option 2" size="large" /> &ndash;&gt;-->
  <!--        &lt;!&ndash; <input type="checkbox" v-model="hobby2" value="健身">健身-->
  <!--		<input type="checkbox" v-model="hobby2" value="旅游">旅游 &ndash;&gt;-->
  <!--        &lt;!&ndash; <i v-if="checked" class="iconfont icon-checked"></i>-->
  <!--    <i v-else class="iconfont icon-unchecked"></i> &ndash;&gt;-->
  <!--      </td>-->
  <!--      <td>{{ user.name }}</td>-->
  <!--      <td>{{ user.price }}</td>-->
  <!--      <td>-->
  <!--        <button @click="sub(index)">-</button>-->
  <!--        {{ user.count }}-->
  <!--        <button @click="add(index)">+</button>-->
  <!--      </td>-->
  <!--      <td>{{ user.price * user.count }}</td>-->
  <!--    </tr>-->
  <!--    <tr align="center">-->
  <!--      <td>总价</td>-->
  <!--      <td colspan="3">{{ computedname }}</td>-->
  <!--    </tr>-->
  <!--  </table>-->

  <!-- checkbox  全都会打勾 -->
  <!-- 我的商品  -->
</template>

<script>

import packages from "@/assets/packages.json";

import { reactive, toRefs, computed } from "vue";
import { ref } from "vue";
// import MyCheckbox from myCheckboxVue
// import myCheckboxVue from "./my-checkbox.vue";
import MyCommodity from "./MyCommodity/index.vue";

// import { useCheckbox } from './Checkbox.vue';
// import { useCheckbox } from './useCheckbox';

// import { useCheckbox } from '';
// useCheckbox
// ObjUtil
import ObjUtil from "../util/ObjUtil";

export default {
  // components() {
  //   myCheckboxVue, MyCommodity;
  // },
  components: {
    // 放在这里 而不是 components()
    // myCheckboxVue,
    MyCommodity,
  },
  // props
  setup() {
    const isSelect = ref(false);

    console.log("packages");
    // 数据从 json 读到
    console.log(packages);
    // let  pp=[
    //                     {
    //                         name: "华为mate30",
    //                         price: 4566,
    //                         count: 2,
    //                         checked: false,
    //                     },
    //                     {
    //                         name: "华为mate40",
    //                         price: 4166,
    //                         count: 3,
    //                         checked: false,
    //                     },
    //                     {
    //                         name: "苹果X",
    //                         price: 5200,
    //                         count: 2,
    //                         checked: false,
    //                     },
    //                     {
    //                         name: "OPPO",
    //                         price: 2180,
    //                         count: 4,
    //                         checked: false,
    //                     },
    //                 ]
    const state = reactive({
      package1: packages,
      packageMine: [],
      showAllCom:true
    });
    const sub = (index) => {
      if (state.package1[index].count > 0) {
        state.package1[index].count--;
      }
    };
 const showAllComDo = () => {
      state.showAllCom=true
    };
    
    const add = (index) => {
      state.package1[index].count++;
    };

    console.log(state.package1);
    const addCommodity = (evt) => {
        state.showAllCom=false
      // evt.pr
      // 防止事件冒泡
      evt.preventDefault();
      // 没用啊
      console.log("======");
      console.log("addCommodity");
      console.log("evt");
      console.log(evt);
      // state.package1.forEach()

      for (let i = 0; i < state.package1.length; i++) {
        let pack = state.package1[i];
        console.log(pack);
        if (pack.checked) {
          // pack.console
          let clonedPack = ObjUtil.deepClone(pack);
          state.packageMine.push(clonedPack);
        }
        // 全部取消选中
        pack.checked = false;
      }

      //  state.packageMine=[]
      // state.package1.forEach((pack)=>{
      //   console.log(pack);
      //   if(pack.checked){
      //      state.packageMine.push(pack)
      //   }
      // })

      // 这里有循环 就会全部选中
      //  state.package1.forEach((pack)=>{
      //   console.log(pack);
      //   // if(pack.checked){
      //   //    state.packageMine.push(pack)
      //   // }
      // })

      // state.packageMine=    state.package1.filter(pack=>{
      //  return pack.checked
      // })
      // let commodity = {
      //   name: "苹果X",
      //   price: 5200,
      //   count: 2,
      // };
      // state.package1.push(commodity);
      // state.package1[index].count++
    };

     const allSel = () => {
         state.package1.forEach(element => {
             element.checked=true
         });
    
    };

     const allNotSel = () => {
         state.package1.forEach(element => {
             element.checked=false
         });
    
    };

    const handleClick = (ev, index) => {
      let checkedBefore = state.package1[index].checked;
      console.log("checkedBefore");
      console.log(checkedBefore);
      // if (checkedBefore==="true") {
      if (checkedBefore) {
        state.package1[index].checked = false;
      } else {
        state.package1[index].checked = true;
      }
      console.log("check change ");
      // // var that = this;
      // console.log("ev");
      //   console.log(ev);
      // setTimeout(function () {
      //   // console.log(
      //   //   "this.hobby2",
      //   //   ev.target.checked,
      //   //   that.hobby2.length,
      //   //   that.hobby2
      //   // );
      //   console.log("ev.target");
      //     console.log(ev.target);
      //        console.log("ev.target.checked");
      //       //  let
      //     console.log(ev.target.checked);
      //     state.package1[index].checked=ev.target.checked
      //   if (!ev.target.checked) {
      //     // if (that.hobby2.length == 1) {
      //     //   that.lastcheckval = that.hobby2[0];
      //     // }
      //     // if (that.hobby2.length == 0) {
      //     //   that.hobby2.push(that.lastcheckval);
      //     // }
      //   }
      // }, 1);
    };



  
    const computedname = computed(() => {
      let prices = 0;
      for (let i = 0; i < state.package1.length; i++) {
        let now = state.package1[i];
        if (now.checked) {
          prices += state.package1[i].price * state.package1[i].count;
        }
      }
      return prices;
    });
    //  useCheckbox(props)
    return {
      isSelect,
      ...toRefs(state),
      computedname,
      sub,
      add,
      addCommodity,
      handleClick,allSel,
      allNotSel,
      showAllComDo
    };
  },
};
</script>

<style scoped>
.row {
  display: flex;
  /* flex-direction: column; */
  flex-direction: row;
}
.col {
  display: flex;
  /* flex-direction: column; */
  flex-direction: column;
}

.all-table {
    background: pink;
  /* transform:translate(-50%,-50%); */
  /* left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  -webkit-transform: translate(-50%, -50%);
 position: absolute; */
  /* background-color: gray; */
  /* color: white; */
 

  /* https://www.w3cschool.cn/css/css-center.html */

  /* 因为是center 所以margin 很大？ */
  /* margin-left: 2px;
      margin-right: 2px; */
  /* margin: auto 0; */
  /* margin: 0 auto; */
}

.content-box{
    display: flex;
    /* flex-direction: column; */
     flex-direction: row;
    justify-content: center;
    /* margin: 0 auto; */
    /* https://zhuanlan.zhihu.com/p/263417006 */
 /* height: 300px; */
 /* background: purple; */
 /* line-height: 300px; */
 text-align: center;
 /* table 变得很高 */
}
/* css 每个子元素 */
.btns{
    margin-left: 4px;
    /* margin-top: 40px; */
        margin-top: 100px;
    margin-bottom: 30px;
    background: yellow;
    /* position: relative;
    margin-left: 20px; */
      /* height:150px;
 line-height:150px; */
  /* display:inline-block; */
}

.btns > * {
    /* // CSS样式 */
    /* margin-top: 3px; */
   margin-top: 6px;
}


/* .inside-ver-center{
     height: 300px;
      line-height: 300px;
} */

/* .inside-ver-center::before{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  background:#f00;


} */
  /* align-content: center; */
.inside-ver-center{
     /* align-content: center; */
     /* align-items: center; */
}
.content-box::before{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  position:relative;
  vertical-align:middle;
  background:#f00;
}

</style>
